page-client-note-list {
    @function computed-vw($px) {
        @return $px/1080*100vw;
    }
    ion-header {
        .all{
            color:#ffca38;
        }
        .cule{
            color:#fff;
            padding-left: 25vw;
        }
        .detailHead {
            .segment-ios {
                padding: 0 11vw;
            }
            .segment-button {
                border: 0;
                color: #fff;
                font-size: 4.44vw;
            }
            .segment-activated {
                color: #ffca37 !important;
                background-color: transparent !important;
            }
        }
    }
    ion-content {
        background-color: #fcfcfc;
        .item-list {
            padding:0;
            min-height: 100%;
            margin: 0;
            padding-bottom: 20vw;
            .total-note{
                height:16vw;
                line-height: 16vw;
                font-size: computed-vw(42);
                .left-panel{
                    color:#333;
                    float: left;
                    margin-left: computed-vw(60);
                }
                .right-panel{
                    float: right;
                    margin-right: 5.55vw;
                    color:#39b54a;
                    background:url("../assets/images/client/client-note/Filter.png") no-repeat;
                    background-size: 5.2vw 5.2vw;
                    padding-left: 6.2vw;
                    background-position: 0 50%;
                }
                .filter-btn {
                    float: right;
                    background-color: #35AC63;
                    color: #fff;
                    text-align: center;
                    border-radius: 10vw;
                    vertical-align: middle;
                    margin-right: computed-vw(60);
                    //padding: 0 5vw;
                    width: computed-vw(182);
                    height: computed-vw(80);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 4.3vw;
                    font-size: computed-vw(36);
                    //box-shadow: 3px 2px 9px 1px rgba(0,0,0,0.15);
                    i {
                        background-image: url("../assets/images/activity/activity-list/icon_filter.png");
                        background-size: 100% 100%;
                        display: inline-block;
                        width: computed-vw(36);
                        height: computed-vw(36);
                        vertical-align: middle;
                        margin-right: computed-vw(15);
                    }
                }
            }
            .total-note.loading{
                border-bottom: 0.35vw solid #eee;
            }
            .note-item {
                padding:0;
                margin:0;
                width:100%;
                .year-sign{
                    width:100%;
                    padding-left:computed-vw(60);
                    margin:0;
                    height: computed-vw(90);
                    font-size: computed-vw(45);
                    color:#333;
                    line-height: computed-vw(90);
                    background-color:#eee;
                }
                .left {
                    float: left;
                    width: 18.6vw;
                    height: 17.6vw;
                    color: #939598;
                    text-align: center;
                    .table {
                        width: 100%;
                        height: 100%;
                        position: relative;
                        .cell {
                            width: 100%;
                            height: 100%;
                            padding-top: 4.5vw;
                            .date {
                                font-size: 6.556vw;
                                margin:0 auto;
                                color:#333;
                                line-height: 5.8vw;
                            }
                            .time {
                                font-size: computed-vw(30);
                                position: absolute;
                                width: 100%;
                                bottom: 2vw;
                                left:0;
                                color:#333;
                            }
                        }
                    }
                }
                .left:after{
                    bottom:-1px;
                }
                .gray-right{
                    .item-ios{
                        color:#999!important;
                        padding-left: 5.55vw;
                    }
                }
                .right {
                    float: left;
                    width: calc(100% - 18.6vw);
                    height: 17.6vw;
                    font-size: 3.88vw;
                    border-left: 1px solid #d1d3d4;
                    ion-item-sliding{
                        height: 100%;
                        overflow: hidden;
                        ion-item{
                            height: 100%;
                            color:#1f212a;
                            padding-left: 5.55vw;
                            .input-wrapper{
                                align-items: baseline;
                                padding-top: computed-vw(40);
                            }
                            .label-ios{
                                font-size: 3.88vw;
                                display: flex;
                                align-items: center;
                                margin:0 0 computed-vw(18) 0;
                            }
                            p.content{
                                display: inline-block;
                                padding-left: 1.389vw;
                                color:#999;
                                font-size: computed-vw(45);
                                margin: 0;
                                max-width: calc(100% - 12vw);
                                .word-panel{
                                    vertical-align: middle;
                                }
                            }
                            p.active{
                                color:#333!important;
                            }
                            p.time{
                                position: absolute;
                                bottom:2vw;
                                left:5.55vw;
                                font-size:computed-vw(33);
                                padding-left: 1vw;
                            }
                            span.voiceNote{
                                display: flex;
                                align-items: center;
                                justify-content: space-around;
                                background:url("../assets/images/client/client-note/icon_notes.png") no-repeat;
                                color:#fff;
                                width:27vw;
                                height:7.78vw;
                                margin-top: 0.2vw;
                                background-size: contain;
                                img{
                                    width:5vw;
                                    height:5vw;
                                    margin-left: 1vw;
                                }
                                img.clear{
                                    display: none;
                                }
                                img.loading{
                                    display: none;
                                    animation: circle 2s linear infinite;
                                }
                                @keyframes circle {
                                    from{
                                        transform:rotateZ(0deg);
                                    }
                                    to{
                                        transform:rotateZ(360deg);
                                    }
                                }
                                i{
                                    font-style:normal;
                                    background:url("../assets/images/common/icon_second.png") no-repeat;
                                    background-size: computed-vw(28);
                                    background-position: 80% 0;
                                    margin-right: 2vw;
                                    padding-right: computed-vw(50);
                                    min-width: 10vw;
                                    text-align: right;
                                }
                            }
                            span.active{
                                color:#35ac63!important;
                                font-size:3.89vw;
                            }
                            span.default{
                                font-size:computed-vw(45);
                                color:#999;
                                max-width: 12vw;
                            }
                        }
                        ion-item.download{
                            span.voiceNote{
                                img.normal{
                                    display: none;
                                }
                                img.loading{
                                    display: inline-block;
                                }
                                i{
                                    display: none;
                                }
                            }
                        }
                        ion-item-options{
                            border:0;
                            height: 100%;
                            overflow: hidden;
                            .button-ios{
                                background-color: #e66660!important;
                                padding:0;
                                width:16.67vw;
                                i{
                                    width:6.67vw;
                                    height:6.67vw;
                                    background: url("../assets/images/client/client-note/ic_list_delete.png") no-repeat;
                                    background-size: cover;
                                }
                            }
                        }
                    }
                    ion-item-sliding.active-slide{
                        background-color: #f5f5f5;
                        margin-top: -1px;
                        ion-item{
                            background-color: #f5f5f5;
                        }
                    }
                }
                .right:after{
                    bottom:-1px;
                }
                .clear-both {
                    clear: both;
                }
            }
            .note-item:nth-child(1){
                .right{
                    ion-item-sliding.active-slide{
                        margin-top: 0!important;
                    }
                }
            }
        }
        ion-fab.client-note-btn-panel{
            width:100vw;
            height:computed-vw(150);
            background-color: #fff;
            left:0;
            bottom:0;
            margin: 0;
            padding: 0;
            box-shadow: -1vw 0 16vw 1vw #eee;
            ion-icon{
                display: none;
            }
            .button-inner{
                width:100%;
            }
            .btn-box{
                margin:0 auto;
                padding:0;
                width:100%;
                border-radius: 0;
                background-color: #fff!important;
                .btn-component{
                    height:computed-vw(100);
                    width:computed-vw(458);
                    display: flex;
                    align-items: center;
                    color:#fff;
                    font-size: computed-vw(42);
                    margin:0;
                    padding:0;
                    i{
                        display: inline-block;
                        width:computed-vw(60);
                        height:computed-vw(60);
                        margin-right: computed-vw(15);
                        background-size: contain !important;
                    }
                }
                .btn-map{
                    background-color: #018c6f;
                    margin-right: computed-vw(29);
                    i{
                        background: url('../assets/images/client/client-note/icon_add_gj.png') no-repeat;
                    }
                }
                .btn-call{
                    background-color: #35ac63;
                    i{
                        background: url("../assets/images/client/client-note/icon_add_gj.png") no-repeat;
                    }
                }
            }
        }
    }
}
